<template>
  <div class="app-container">
    <!-- 工具条 -->
    <div class="toolbar">
      <div class="left-section">
        <el-button type="success" @click="add()">新增相册</el-button>
      </div>
      <div class="search-form">
        <el-form :inline="true">
          <el-form-item label="关键字">
            <el-input
              type="text"
              width="100"
              placeholder="请输入作品关键词"
              v-model="searchObj.keyword"
              clearable
            />
          </el-form-item>

          <el-button type="primary" icon="el-icon-search" @click="fetchData()"
            >查询</el-button
          >
          <el-button type="default" @click="resetData">清空</el-button>
        </el-form>
      </div>
    </div>

    <!-- 使用懒加载 -->
    <div
      class="infinite-list-wrapper"
      style="overflow: auto; margin: 20px 20px 0 0"
    >
      <el-row class="card-container">
        <el-col
          :span="5"
          v-for="(item, index) in list"
          :key="index"
          style="margin: 9px"
        >
          <div class="card">
            <div slot="header" class="clearfix">
              <span>{{ item.name }}</span>
              <div class="bottom clearfix">
                <time style="font-size: 12px; color: #999"
                  >更新时间： {{ item.updateTime }}</time
                >
              </div>
            </div>
            <img :src="item.imgUrl" />
            <div class="buttons">
              <router-link
                :to="'/album/imgList/' + item.id"
                style="margin: 0 5px"
                ><el-button type="text" icon="el-icon-search" size="mini"
                  >查看照片</el-button
                ></router-link
              >

              <router-link
                :to="'/album/edit/' + item.id"
                style="margin-right: 5px"
              >
                <el-button type="text" icon="el-icon-edit" size="mini"
                  >编辑相册</el-button
                >
              </router-link>

              <el-button type="text" icon="el-icon-share" size="mini"
                >分享</el-button
              >

              <el-button
                type="text"
                icon="el-icon-delete"
                size="mini"
                @click="removeDataById(item.id)"
                >删除</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import AlbumApi from '@/api/photo/album'

export default {
  data() {
    return {
      listLoading: true, // 数据是否正在加载
      list: null, // banner列表
      total: 0, // 数据库中的总记录数
      page: 1, // 默认页码
      limit: 100, // 每页记录数
      searchObj: {}, // 查询表单对象
      multipleSelection: [] // 批量选择中选择的记录列表
    }
  },

  // 生命周期函数：内存准备完毕，页面尚未渲染
  created() {
    console.log('list created......')
    this.fetchData()
  },

  // 生命周期函数：内存准备完毕，页面渲染成功
  mounted() {
    console.log('list mounted......')
  },

  methods: {
    // 当页码发生改变的时候
    changeSize(size) {
      console.log(size)
      this.limit = size
      this.fetchData(1)
    },

    add() {
      this.$router.push({ path: '/album/add' })
    },

    // 加载banner列表数据
    fetchData(page = 1) {
      // 异步获取远程数据（ajax）
      this.page = page
      AlbumApi.getPageList(this.page, this.limit, this.searchObj).then(
        (response) => {
          console.log(response)
          this.list = response.data.records
          this.total = response.data.total
          // 数据加载并绑定成功
          this.listLoading = false
        }
      )
    },

    // 重置查询表单
    resetData() {
      console.log('重置查询表单')
      this.searchObj = {}
      this.fetchData()
    },

    // 根据id删除数据
    removeDataById(id) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // promise
          // 点击确定，远程调用ajax
          return AlbumApi.removeById(id)
        })
        .then((response) => {
          this.fetchData(this.page)
          if (response.code) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    // 当表格复选框选项发生变化的时候触发
    handleSelectionChange(selection) {
      console.log('handleSelectionChange......')
      console.log(selection)
      this.multipleSelection = selection
    }
  }
}
</script>
<style>
.card-container {
  display: flex;
  flex-wrap: wrap; /* 当容器放不下时自动换行 */
}
.card {
  width: 100%; /* 使用百分比或者相对单位 */
  max-width: 400px; /* 设置最大宽度 */
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 10px; /* 圆角卡片 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果，可根据需要调整 */
  background-color: #fff; /* 卡片背景色，可根据需要调整 */
  aspect-ratio: 0.7; /* 1:1 比例，可以根据需要调整 */
}
.card img {
  width: 100%;
  height: 80%;
  object-fit: cover; /* 拉伸或缩放图片以适应容器 */
  border-radius: 5px;
  margin-bottom: 10px;
  box-sizing: border-box; /* 防止宽度溢出 */
}
.bottom {
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 12px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.left-section {
  display: flex;
  align-items: center;
}

.search-form {
  display: flex;
  align-items: center;
}

.search-input {
  padding: 5px;
  margin-right: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.search-button,
.buttons {
  display: flex;
  flex-wrap: wrap; /* 当容器放不下时自动换行 */
  width: 100%; /* 让按钮充满卡片的宽度 */
}
</style>
